<template>
  <!-- 弹窗 -->
  <div class="dialog_box">
    <el-dialog v-model="visible" title="切换收货地址" width="600px" @closed="onClosed">
      <div class="title">
        <div class="left">当前{{ addressList.length }}个地址，最多可添加10个</div>
        <div class="right" @click="formVisible = true">新增收货地址</div>
      </div>
      <div :class="item.id == activeData.id ? 'item radio' : 'item'" v-for="item in addressList" :key="item" @click="activeData = item">
        <div class="full_name"> {{ item.full_name }} {{ item.mobile }} </div>
        <div class="address">{{ item.address }}</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="formVisible" title="新增收货地址" width="600px" @closed="onClosedForm">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="收货人" prop="full_name">
          <el-input v-model="form.full_name" placeholder="请输入收货人姓名" />
        </el-form-item>
        <el-form-item label="收货电话" prop="mobile">
          <!-- <el-input v-model="form.mobile" type="number" maxlength="11" minlength="11" show-word-limit placeholder="请输入收货电话" /> -->
          <el-input class="input" v-model.number="form.mobile" type="text" placeholder="请输入收货电话" autocomplete="off" maxLength="11"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="pca_code">
          <el-cascader v-model="form.pca_code" :options="cityData" placeholder="请选择省市区" :props="defaultProps" style="width: 100%" />
        </el-form-item>
        <el-form-item prop="address">
          <el-input v-model="form.address" type="textarea" maxlength="50" :rows="4" show-word-limit placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="formVisible = false">取消</el-button>
        <el-button type="primary" @click="onAddressSubmit(formRef)">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { orderAddressCreate, getOrderAddressList } from '@/api/salesleads/ordermanagement/orderlist'
  import { validatePhone } from '@/utils/validate'
  import cityData from '@/assets/js/city'
  import { ElMessage } from 'element-plus'
  import { ref, reactive } from 'vue'
  const emit = defineEmits(['submit'])
  const visible = ref(false)
  const formVisible = ref(false)
  const onClosed = () => {}
  const formRef = ref<any>()
  const form = reactive({
    cust_id: '', //客户id
    full_name: '', //收货人
    mobile: '', //手机号码
    pca_code: '', //地区code
    address: '' //详细地址
  })
  // 手机号验证
  const validateMobile = (rule: any, value: any, callback: any) => {
    if (value == '') callback(new Error('手机号不能为空！'))
    else if (validatePhone(value)) {
      callback(new Error('手机格式有误！'))
    } else {
      callback()
    }
  }
  const rules = reactive<any>({
    full_name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
    pca_code: [{ required: true, message: '请选择地区', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: validateMobile, trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
  })
  const onCancel = () => {}
  const defaultProps = {
    checkStrictly: false, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'code'
  }
  const activeData = ref<any>({})

  const onSubmit = () => {
    emit('submit', activeData.value)
    visible.value = false
  }
  const addressList = ref<any>([])
  const getAddressList = () => {
    getOrderAddressList({ cust_id: form.cust_id }).then((res: any) => {
      addressList.value = res
    })
  }
  // 新增收货地址
  const onAddressSubmit = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        orderAddressCreate(form).then((res: any) => {
          console.log(res)
          ElMessage.success('新增收货地址成功')
          formVisible.value = false
          getAddressList()
        })
      }
    })
  }
  // 数据回显
  const handleaddressDialog = (id: any) => {
    visible.value = true
    form.cust_id = id
    getAddressList()
  }
  // 关闭新增弹框
  const onClosedForm = () => {
    form.full_name = ''
    form.mobile = ''
    form.pca_code = ''
    form.address = ''
    formRef.value.resetFields()
  }
  defineExpose({
    handleaddressDialog
  })
</script>

<style lang="scss" scoped>
  :deep .el-input__inner::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  .dialog_box {
    :deep(.el-dialog) {
      .el-dialog__header {
        border-bottom: 1px solid #eaeaea;
        .el-dialog__title {
          // font-size: 16px;
        }
      }
      .el-dialog__body {
        padding: 20px;
        border-bottom: 1px solid #eaeaea;
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .left {
      font-size: 14px;
      color: #969696;
    }
    .right {
      cursor: pointer;
      font-size: 14px;
      color: #ff6b00;
    }
  }
  .item {
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
    background: #f7f7f7;
    &::after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 50%;
      right: 18px;
      transform: translateY(-50%);
      background: #ffffff;
      border: 1px solid #f1f1f1;
      border-radius: 50%;
    }
  }
  .radio {
    position: relative;
    &::after {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      right: 18px;
      transform: translateY(-50%);
      background: #ff6b00;
      border-radius: 50%;
    }
    &::before {
      content: '';
      width: 12px;
      height: 12px;
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      background: #fff;
      border: 2px solid #ff6b00;
      border-radius: 50%;
    }
  }
  .full_name {
    margin-right: 6px;
    margin-bottom: 8px;
  }
  .address {
    padding-right: 20px;
  }
  .btn_box {
    text-align: right;
  }
</style>
